<template>
  <codemirror
    v-model="code"
    placeholder="输入代码..."
    :style="{ height: '400px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="[extensions]"
  />
</template>

<script lang="ts">
export default {
  // name: "code",
};
</script>
<script setup lang="ts">
import { Codemirror } from "vue-codemirror";
import { html } from "@codemirror/lang-html";
import { javascript } from "@codemirror/lang-javascript";
import { json } from "@codemirror/lang-json";
import { php } from "@codemirror/lang-php";
import { sql } from "@codemirror/lang-sql";
import { oneDark } from "@codemirror/theme-one-dark";

const langs = [html(), javascript(), json(), php(), sql()];
const code = ref(`console.log('Hello, world!')`);
const extensions: any = [langs[1], oneDark];
const log = (str: string, e: any) => {
  console.log(str);
};
</script>
<style scoped>
:deep(.cm-editor) {
  height: 100%;
}
</style>
